<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放页面</title>
    <link rel="stylesheet" href="../css/main.css" />
    <!-- 添加Font Awesome图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        /* 全局样式重置与基础设置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        /* 导航栏样式优化 */
        .head_bg {
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: #0078ff;
        }

        .logo::before {
            content: "\f03d";
            font-family: "FontAwesome";
            margin-right: 10px;
            font-size: 28px;
        }

        .head_bg > div:last-child {
            display: flex;
            gap: 20px;
        }

        .head_bg a {
            color: #666;
            font-size: 14px;
            padding: 5px 0;
            position: relative;
        }

        .head_bg a:hover {
            color: #0078ff;
        }

        /* 视频播放区域样式 */
        .video-player-container {
            background-color: #000;
            position: relative;
            width: 100%;
            aspect-ratio: 16/9;
            margin-bottom: 20px;
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .video-controls-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
            padding: 20px;
            color: white;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .video-player-container:hover .video-controls-overlay {
            opacity: 1;
        }

        .video-title-main {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .video-stats {
            display: flex;
            gap: 15px;
            font-size: 14px;
        }

        .video-actions {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }

        .video-action-btn {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .video-action-btn:hover {
            color: #0078ff;
        }

        /* 视频信息样式 */
        .video-info {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .video-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #222;
        }

        .video-meta {
            display: flex;
            justify-content: space-between;
            color: #666;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .video-creator {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .creator-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #eee;
            background-size: cover;
            background-position: center;
        }

        .creator-info {
            flex: 1;
        }

        .creator-name {
            font-weight: bold;
            margin-bottom: px;
        }

        .creator-subscribers {
            font-size: 13px;
            color: #666;
        }

        .subscribe-btn {
            background-color: #ff385c;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .subscribe-btn:hover {
            background-color: #e02e4e;
        }

        .video-description {
            line-height: 1.8;
            color: #333;
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }

        .video-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }

        .video-tag {
            background-color: #f0f2f5;
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 13px;
            color: #666;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .video-tag:hover {
            background-color: #e0e4eb;
        }

        /* 推荐视频列表样式 */
        .recommended-videos {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .recommended-videos h3 {
            font-size: 20px;
            margin-bottom: 20px;
            color: #222;
            padding-bottom: 10px;
            border-bottom: 2px solid #f0f2f5;
        }

        .video-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 20px;
        }

        .video-item {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        .video-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }

        .video-thumbnail {
            width: 100%;
            aspect-ratio: 16/9;
            background-color: #eee;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .video-duration {
            position: absolute;
            bottom: 5px;
            right: 5px;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 12px;
            padding: 2px 5px;
            border-radius: 3px;
        }

        .video-item-details {
            padding: 12px;
        }

        .video-title-sm {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 40px;
        }

        .video-meta-sm {
            font-size: 12px;
            color: #666;
        }

        /* 评论区域样式 */
        .video-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            gap: 25px;
            padding: 0 20px;
        }

        .comment-section {
            flex: 1;
            background-color: #fff;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            border-radius: 8px;
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .comment-tabs {
            display: flex;
            gap: 15px;
        }

        .comment-tab {
            font-weight: 500;
            cursor: pointer;
            padding-bottom: 5px;
            border-bottom: 2px solid transparent;
        }

        .comment-tab.active {
            color: #0078ff;
            border-bottom-color: #0078ff;
        }

        .comment-sort {
            display: flex;
            align-items: center;
            gap: 5px;
            color: #666;
            cursor: pointer;
        }

        .comment-input-container {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #eee;
        }

        .comment-input-wrapper {
            flex: 1;
        }

        .comment-input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            resize: none;
            font-size: 14px;
            min-height: 100px;
            transition: border-color 0.2s;
        }

        .comment-input:focus {
            outline: none;
            border-color: #0078ff;
        }

        .comment-submit {
            background-color: #0078ff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            transition: background-color 0.3s;
            font-weight: 500;
            margin-left: auto;
            display: block;
            margin-top: 10px;
        }

        .comment-submit:hover {
            background-color: #0056b3;
        }

        .comment-list {
            margin-top: 20px;
        }

        .comment-item {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #f0f2f5;
        }

        .comment-header-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .comment-author {
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .comment-time {
            font-size: 12px;
            color: #999;
        }

        .comment-content {
            color: #333;
            margin-bottom: 10px;
            line-height: 1.6;
        }

        .comment-actions {
            display: flex;
            gap: 15px;
            font-size: 13px;
            color: #666;
        }

        .comment-action {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .comment-action:hover {
            color: #0078ff;
        }

        .reply-list {
            margin-top: 15px;
            margin-left: 50px;
            border-left: 2px solid #f0f2f5;
            padding-left: 15px;
        }

        .reply-item {
            margin-bottom: 15px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f9f9f9;
        }

        .reply-form {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .reply-input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 15px;
            resize: none;
            font-size: 13px;
            min-height: 40px;
        }

        .reply-actions {
            display: flex;
            gap: 10px;
            margin-top: 8px;
        }

        .reply-btn {
            background-color: #0078ff;
            color: white;
            border: none;
            padding: 5px 12px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 13px;
        }

        .cancel-reply-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 13px;
        }

        /* 底部内容容器 */
        .content-container {
            display: flex;
            max-width: 1200px;
            margin: 20px auto;
            gap: 25px;
            padding: 0 20px;
        }

        .main-content {
            flex: 2;
        }

        .sidebar-content {
            flex: 1;
        }

        /* 页脚 */
        .bottom {
            background-color: #f8f9fa;
            padding: 30px 0;
            margin-top: 40px;
            border-top: 1px solid #eee;
        }

        .bottom > div {
            text-align: center;
            color: #666;
            font-size: 14px;
        }

        /* 响应式设计 */
        @media (max-width: 900px) {
            .content-container {
                flex-direction: column;
            }

            .video-container {
                flex-direction: column;
            }

            .comment-section {
                max-width: none;
            }

            .video-list {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }

        @media (max-width: 600px) {
            .video-title {
                font-size: 20px;
            }

            .video-meta {
                flex-direction: column;
                gap: 10px;
            }

            .video-actions {
                flex-wrap: wrap;
            }

            .video-list {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            }

            .video-item-details {
                padding: 10px;
            }

            .video-title-sm {
                font-size: 13px;
                height: 36px;
            }
        }
    </style>
</head>
<body>
<div>
    <!-- 头部导航 -->
    <div class="head_bg">
        <div class="logo">欣欣视频</div>
        <div>
            <span><a href="#">登录</a></span>
            <span><a href="#">注册</a></span>
            <span><a href="#">APP下载</a></span>
            <span><a href="#">PC客户端</a></span>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-container">
        <!-- 左侧主内容 -->
        <div class="main-content">
            <!-- 视频播放区域 -->
            <div class="video-player-container">
                <video controls poster="https://picsum.photos/id/237/1280/720">
                    <source src="path/to/your-video.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
                <div class="video-controls-overlay">
                    <div class="video-title-main">2023最新动作大片精彩片段</div>
                    <div class="video-stats">
                        <span><i class="fa fa-eye"></i> 120万次观看</span>
                        <span><i class="fa fa-calendar"></i> 2025-06-24</span>
                    </div>
                    <div class="video-actions">
                        <div class="video-action-btn"><i class="fa fa-thumbs-up"></i> 点赞 (2.4万)</div>
                        <div class="video-action-btn"><i class="fa fa-heart"></i> 收藏 (1.2万)</div>
                        <div class="video-action-btn"><i class="fa fa-share"></i> 分享</div>
                        <div class="video-action-btn"><i class="fa fa-download"></i> 下载</div>
                    </div>
                </div>
            </div>

            <!-- 视频信息 -->
            <div class="video-info">
                <div class="video-title">2023最新动作大片，精彩打斗场面全程高能</div>

                <div class="video-creator">
                    <div class="creator-avatar" style="background-image: url('https://picsum.photos/id/64/100/100');"></div>
                    <div class="creator-info">
                        <div class="creator-name">电影前线</div>
                        <div class="creator-subscribers">128.5万 订阅者</div>
                    </div>
                    <button class="subscribe-btn">订阅</button>
                </div>

                <div class="video-meta">
                    <div>
                        <span>120万播放 </span>
                        <span>• 发布于 2025-06-24</span>
                    </div>
                    <div>
                        <span>分类: 电影</span>
                    </div>
                </div>

                <div class="video-description">
                    这部动作大片汇集了全球顶级动作明星，带来前所未有的视觉盛宴。影片讲述了一位退役特工为保护家人，不得不重出江湖的故事。全片打斗场面精彩绝伦，尤其是结尾的30分钟高潮戏，让人热血沸腾！
                    <br><br>
                    喜欢这部电影的观众还喜欢《速度与激情10》、《碟中谍7》等影片。欢迎在评论区分享你的观影感受！
                </div>

                <div class="video-tags">
                    <div class="video-tag">动作片</div>
                    <div class="video-tag">好莱坞</div>
                    <div class="video-tag">2023电影</div>
                    <div class="video-tag">精彩打斗</div>
                    <div class="video-tag">特工</div>
                </div>
            </div>

            <!-- 评论区域 -->
            <div class="comment-section">
                <div class="comment-header">
                    <div class="comment-tabs">
                        <div class="comment-tab active">全部评论 (248)</div>
                        <div class="comment-tab">热门评论</div>
                    </div>
                    <div class="comment-sort">
                        <span>排序方式</span>
                        <i class="fa fa-chevron-down"></i>
                    </div>
                </div>

                <div class="comment-input-container">
                    <div class="user-avatar"></div>
                    <div class="comment-input-wrapper">
                        <textarea class="comment-input" placeholder="分享你的想法..."></textarea>
                        <button class="comment-submit">发布评论</button>
                    </div>
                </div>

                <div class="comment-list">
                    <div class="comment-item">
                        <div class="comment-header-item">
                            <div class="comment-author">
                                <div class="user-avatar" style="width: 30px; height: 30px;"></div>
                                <span>用户A</span>
                            </div>
                            <div class="comment-time">2025-06-24 12:30</div>
                        </div>
                        <div class="comment-content">这个视频太棒了！打斗场面太精彩了，尤其是追车那段，简直让人目不暇接！</div>
                        <div class="comment-actions">
                            <div class="comment-action"><i class="fa fa-thumbs-up"></i> 328</div>
                            <div class="comment-action reply-btn"><i class="fa fa-reply"></i> 回复</div>
                        </div>

                        <div class="reply-list">
                            <div class="reply-item">
                                <div class="comment-header-item">
                                    <div class="comment-author">
                                        <div class="user-avatar" style="width: 25px; height: 25px;"></div>
                                        <span>用户B</span>
                                    </div>
                                    <div class="comment-time">2025-06-24 13:45</div>
                                </div>
                                <div class="comment-content">同意！我最喜欢的是结局那场戏，太震撼了！</div>
                                <div class="comment-actions">
                                    <div class="comment-action"><i class="fa fa-thumbs-up"></i> 156</div>
                                    <div class="comment-action reply-btn"><i class="fa fa-reply"></i> 回复</div>
                                </div>
                            </div>

                            <div class="reply-form">
                                <div class="user-avatar" style="width: 30px; height: 30px;"></div>
                                <textarea class="reply-input" placeholder="写下你的回复..."></textarea>
                            </div>
                            <div class="reply-actions">
                                <button class="reply-btn">回复</button>
                                <button class="cancel-reply-btn">取消</button>
                            </div>
                        </div>
                    </div>

                    <div class="comment-item">
                        <div class="comment-header-item">
                            <div class="comment-author">
                                <div class="user-avatar" style="width: 30px; height: 30px;"></div>
                                <span>用户C</span>
                            </div>
                            <div class="comment-time">2025-06-24 15:20</div>
                        </div>
                        <div class="comment-content">这部电影的配乐也很棒，和动作场面完美结合，增强了观影体验。</div>
                        <div class="comment-actions">
                            <div class="comment-action"><i class="fa fa-thumbs-up"></i> 98</div>
                            <div class="comment-action reply-btn"><i class="fa fa-reply"></i> 回复</div>
                        </div>
                    </div>

                    <div class="comment-item">
                        <div class="comment-header-item">
                            <div class="comment-author">
                                <div class="user-avatar" style="width: 30px; height: 30px;"></div>
                                <span>用户D</span>
                            </div>
                            <div class="comment-time">2025-06-25 09:15</div>
                        </div>
                        <div class="comment-content">有没有人知道电影里主角用的那辆车是什么型号？太酷了！</div>
                        <div class="comment-actions">
                            <div class="comment-action"><i class="fa fa-thumbs-up"></i> 45</div>
                            <div class="comment-action reply-btn"><i class="fa fa-reply"></i> 回复</div>
                        </div>

                        <div class="reply-list">
                            <div class="reply-item">
                                <div class="comment-header-item">
                                    <div class="comment-author">
                                        <div class="user-avatar" style="width: 25px; height: 25px;"></div>
                                        <span>汽车达人</span>
                                    </div>
                                    <div class="comment-time">2025-06-25 10:30</div>
                                </div>
                                <div class="comment-content">那是2023款保时捷911 Turbo S，百公里加速2.7秒，确实很帅气！</div>
                                <div class="comment-actions">
                                    <div class="comment-action"><i class="fa fa-thumbs-up"></i> 23</div>
                                    <div class="comment-action reply-btn"><i class="fa fa-reply"></i> 回复</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧推荐视频 -->
        <div class="sidebar-content">
            <div class="recommended-videos">
                <h3>推荐视频</h3>
                <div class="video-list">
                    <div class="video-item">
                        <div class="video-thumbnail" style="background-image: url('https://picsum.photos/id/96/480/270');">
                            <div class="video-duration">05:20</div>
                        </div>
                        <div class="video-item-details">
                            <div class="video-title-sm">科技新品发布会全程回顾，多项黑科技震撼发布</div>
                            <div class="video-meta-sm">34.5万次观看 • 3天前</div>
                        </div>
                    </div>

                    <div class="video-item">
                        <div class="video-thumbnail" style="background-image: url('https://picsum.photos/id/292/480/270');">
                            <div class="video-duration">08:45</div>
                        </div>
                        <div class="video-item-details">
                            <div class="video-title-sm">经典电影幕后花絮，导演亲自解读创作历程</div>
                            <div class="video-meta-sm">87.2万次观看 • 1周前</div>
                        </div>
                    </div>

                    <div class="video-item">
                        <div class="video-thumbnail" style="background-image: url('https://picsum.photos/id/119/480/270');">
                            <div class="video-duration">03:12</div>
                        </div>
                        <div class="video-item-details">
                            <div class="video-title-sm">体育赛事精彩瞬间，绝杀时刻让人热血沸腾</div>
                            <div class="video-meta-sm">56.8万次观看 • 2天前</div>
                        </div>
                    </div>

                    <div class="video-item">
                        <div class="video-thumbnail" style="background-image: url('https://picsum.photos/id/26/480/270');">
                            <div class="video-duration">12:30</div>
                        </div>
                        <div class="video-item-details">
                            <div class="video-title-sm">米其林大厨教你做正宗法式甜点，步骤详细</div>
                            <div class="video-meta-sm">23.4万次观看 • 5天前</div>
                        </div>
                    </div>

                    <div class="video-item">
                        <div class="video-thumbnail" style="background-image: url('https://picsum.photos/id/180/480/270');">
                            <div class="video-duration">06:45</div>
                        </div>
                        <div class="video-item-details">
                            <div class="video-title-sm">办公室健身小动作，缓解久坐疲劳</div>
                            <div class="video-meta-sm">45.1万次观看 • 4天前</div>
                        </div>
                    </div>

                    <div class="video-item">
                        <div class="video-thumbnail" style="background-image: url('https://picsum.photos/id/119/480/270');">
                            <div class="video-duration">04:20</div>
                        </div>
                        <div class="video-item-details">
                            <div class="video-title-sm">程序员必备的5个效率工具推荐</div>
                            <div class="video-meta-sm">31.7万次观看 • 3天前</div>
                        </div>
                    </div>

                    <div class="video-item">
                        <div class="video-thumbnail" style="background-image: url('https://picsum.photos/id/225/480/270');">
                            <div class="video-duration">09:15</div>
                        </div>
                        <div class="video-item-details">
                            <div class="video-title-sm">周末自驾游攻略，小众景点推荐</div>
                            <div class="video-meta-sm">18.9万次观看 • 1周前</div>
                        </div>
                    </div>

                    <div class="video-item">
                        <div class="video-thumbnail" style="background-image: url('https://picsum.photos/id/169/480/270');">
                            <div class="video-duration">02:58</div>
                        </div>
                        <div class="video-item-details">
                            <div class="video-title-sm">萌宠搞笑瞬间，治愈你的不开心</div>
                            <div class="video-meta-sm">92.3万次观看 • 2天前</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="bottom">
        <div><span>Copyright</span><span>&copy;</span><span>2001-2025</span><span>欣欣视频网</span> | <span>ICP备案号: 京ICP备12345678号-1</span></div>
    </div>
</div>

<script>
    // 评论回复功能
    document.querySelectorAll('.reply-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const commentItem = this.closest('.comment-item, .reply-item');
            const replyForm = commentItem.querySelector('.reply-form');

            if (replyForm) {
                replyForm.style.display = replyForm.style.display === 'none' ? 'flex' : 'none';
            } else {
                // 创建回复表单
                const newReplyForm = document.createElement('div');
                newReplyForm.className = 'reply-form';
                newReplyForm.innerHTML = `
                    <div class="user-avatar" style="width: 30px; height: 30px;"></div>
                    <textarea class="reply-input" placeholder="写下你的回复..."></textarea>
                `;

                const replyActions = document.createElement('div');
                replyActions.className = 'reply-actions';
                replyActions.innerHTML = `
                    <button class="reply-btn">回复</button>
                    <button class="cancel-reply-btn">取消</button>
                `;

                // 插入到DOM中
                this.closest('.comment-actions').after(newReplyForm);
                newReplyForm.after(replyActions);

                // 取消回复按钮事件
                replyActions.querySelector('.cancel-reply-btn').addEventListener('click', function() {
                    newReplyForm.remove();
                    replyActions.remove();
                });
            }
        });
    });

    // 评论标签切换
    document.querySelectorAll('.comment-tab').forEach(tab => {
        tab.addEventListener('click', function() {
            document.querySelectorAll('.comment-tab').forEach(t => t.classList.remove('active'));
            this.classList.add('active');
            // 这里可以添加切换评论内容的逻辑
        });
    });
</script>
</body>
</html>